<template>
  <div >
<!-- 前端代码表    -->

      <el-table
        :data="deparment"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="日期">
        </el-table-column>


      </el-table>

<!-- 设置好分页,并且给展示分页设置变量   -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"

      @current-change="gopage"
    >
    </el-pagination>
  </div>
</template>

<script>


export default {
  name: 'HelloWorld',
  data () {
    return {
      /* 设置表为变量数组*/
      deparment: [],
      /*给当前页设置初始值*/
      currentPage:1,
      /*给当前页的条数设置为5*/
      pageSize:5,
      total:0
    }
  },
  mounted() {
    /* 发送请求给后端获取表数据*/
    this.list();
  },
  methods:{
    gopage(currentPage) {
      this.currentPage = currentPage;
      this.list()
    },
    list(){
     this.$http.get("/deparment/loadAll",{"currentPage":this.currentPage,"pageSize":this.pageSize})
      .then(result=>{
        this .deparment =  result.data.data
        this.total = result.data.totals
      }).catch(result=>{
        result.error("失败")
     })
    }

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
